<template>
  <div class="win">
    <!-- 顶部栏 -->
    <div class="head_box_space"></div>
    <div class="head_box">
      <div class="row">
        <img src="/static/img/search_icon.png" class="search_icon" alt />
        <input
          type="text"
          v-model="searchText"
          confirm-type="search"
          @confirm="searchGood"
          placeholder="请输入商品名称"
        />
      </div>
    </div>
    <!-- 暂无数据 -->
    <!-- 商品栏 -->
    <div class="all_merchandise_box">
      <scroll-view class="merchandise_left_box" :scroll-y="true">
        <div
          class="merchandise_name"
          v-for="(item,index) in navList"
          @click="navTab(item.class_id,index)"
          :key="index"
          :class="index==navActive?'active':''"
        >
          <p>{{item.name}}</p>
        </div>
      </scroll-view>
      <div class="merchandise_right_box">
        <div class="sort_bar">
          <div class="lit" @click="saleSortTab" :class="barActive==1?'rise':''">
            <p>销量排序</p>
            <img v-if="barActive===1&&saleSort===0" src="/static/img/sort_grey_top.png" />
            <img v-else-if="barActive===1&&saleSort===1" src="/static/img/sort_grey_bottom.png" />
            <img v-else src="/static/img/sort_grey.png" />
          </div>
          <div class="lit" @click="priceSortTab" :class="barActive==2?'rise':''">
            <p>价格排行</p>
            <img v-if="barActive===2&&priceSort===0" src="/static/img/sort_grey_top.png" />
            <img v-else-if="barActive===2&&priceSort===1" src="/static/img/sort_grey_bottom.png" />
            <img v-else src="/static/img/sort_grey.png" />
          </div>
        </div>

        <noData v-if="commodity==''"></noData>
        <scroll-view v-else class="commodity_box" :scroll-y="true">
          <div
            class="item"
            v-for="(item,index) in commodity"
            :key="index"
            @click="hr_goodsDetail(item.pro_id)"
          >
            <div class="item_top_left">
              <img :src="item.image" class="img" />
            </div>
            <div class="item_top_right">
              <p class="name ellipsis2">{{item.name}}</p>
              <div class="tips_box">
                <p
                  v-if="l<2"
                  :class="ite=='包邮'?'blue':'green'"
                  v-for="(ite, l) in item.label"
                  :key="l"
                >{{ite}}</p>
              </div>
              <p class="money_logo1">
                ¥
                <span class="price">{{item.sale_price}}</span>
              </p>
              <div class="comput_row" @click.stop>
                <img
                  @click="goodReduce(item)"
                  v-if="item.num!=null&&item.num!=0"
                  src="/static/img/reduce_logo.png"
                  class="comput_lit"
                  alt
                />
                <p v-if="item.num!=null&&item.num!=0" class="comput_lit_text">{{item.num}}</p>
                <img
                  @click="goodAdd(item)"
                  src="/static/img/add_logo.png"
                  class="comput_lit"
                  v-if="item.num!=null&&item.num!=0"
                />
                <img
                  class="shop_car_small"
                  v-if="item.num==null||item.num==0"
                  @click="getAddShopcar(item)"
                  :src="bjurl+'shop_car_small_logo.png'"
                  alt
                />
              </div>
            </div>
          </div>
        </scroll-view>
      </div>
    </div>
    <!-- 底部 -->
    <div class="immediate_settlement_box_space"></div>
    <div class="immediate_settlement_box">
      <div class="car_num" @click="hr_shopCar">
        <img v-if="bjurl" :src="bjurl+'shop_car_bottom_big.png'" />
        <p v-if="count!=0">{{count}}</p>
      </div>
      <p class="now_price">
        <span class="sp1">合计:</span>
        <span class="sp2">¥</span>
        <span class="sp3">{{totalPrice}}</span>
      </p>
      <button class="btn" @click="hr_shopCar">立即购买</button>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
import noData from "@/components/noData";
export default {
  data() {
    return {
      class_id: 0,
      bjurl: "",
      navList: [],
      commodity: [],
      navActive: 0, //左侧导航栏选中状态标记
      priceSort: 0, //价格排序状态 0为降序 1为升序, 默认0
      saleSort: 0, //销量排序状态 0为降序 1为升序, 默认0,
      //总价
      totalPrice: 0, //总价格
      count: 0, //总数量
      shopCarList: [],
      current: 0, //picker选中的项
      actList: [], //待选的数组,
      val: "", //选中的value,用于查询商品的分类标识
      barActive: 0, //顶部选中标记
      searchText: ""
    };
  },
  methods: {
    //请求购物车列表数量
    getShopCarList() {
      this.totalPrice = 0;
      this.count = 0;
      this.$ajax("/home/Shopcar/shopCarlists", "post", {})
        .then(res => {
          if (res.status) {
            this.shopCarList = res.data;
            this.shopCarList.forEach(el => {
              this.totalPrice += parseFloat(el.price) * el.num;
              this.count += el.num;
            });
            this.totalPrice = this.totalPrice.toFixed(2);
            this.$forceUpdate();
          } else {
          }
        })
        .catch(err => {});
    },
    //请求接口加入购物车
    getAddShopcar(item) {
      this.$ajax("/home/Shopcar/addShopcar", "post", {
        pro_id: item.pro_id,
        num: 1,
        price: item.sale_price,
        type: 1
      })
        .then(res => {
          if (res.status) {
            this.$toast({
              content: "加入成功~"
            });
            item.num = 1;
            this.getShopCarList();
          } else {
            this.$toast({
              content: "该商品已在购物车里了~"
            });
          }
        })
        .catch(err => {});
    },
    //请求接口商品分类名称
    getGoodsClassName() {
      this.$ajax("/home/getInfo/getproClassname", "post", {})
        .then(res => {
          if (res.status) {
            this.navList = res.data;
          } else {
          }
        })
        .catch(err => {});
    },
    //请求接口商品分类商品
    getGoods() {
      this.$ajax("/home/getInfo/getproClass", "post", {
        class_id: this.class_id,
        pro_name: this.searchText
      })
        .then(res => {
          if (res.status) {
            this.commodity = res.data;
          } else {
            this.commodity = "";
          }
          this.computedTotal();
        })
        .catch(err => {});
    },
    // 切换侧边导航
    navTab(class_id, index) {
      if (index === this.navActive) {
        if (index == 0) {
          this.barActive = 0;
        }
        return;
      }
      this.barActive = 0;
      this.navActive = index;
      this.class_id = class_id;
      this.getGoods();
      if (index == 0) {
        this.barActive = 0;
      }
    },
    // 销量排序
    saleSortTab() {
      this.barActive = 1;
      this.saleSort = this.saleSort === 0 ? 1 : 0;
      this.commodity.sort((a, b) => {
        return this.saleSort === 0
          ? a.sale_num - b.sale_num
          : b.sale_num - a.sale_num;
      });
    },
    // 价格排序
    priceSortTab() {
      this.barActive = 2;
      this.priceSort = this.priceSort === 0 ? 1 : 0;
      this.commodity.sort((a, b) => {
        return this.priceSort === 0
          ? Number(a.sale_price) - Number(b.sale_price)
          : Number(b.sale_price) - Number(a.sale_price);
      });
    },
    // 搜索商品
    searchGood(e) {
      this.getGoods();
    },
    // 商品 ++
    goodAdd(item) {
      this.$ajax("/home/Shopcar/shopWriteNum", "post", {
        pro_id: item.pro_id,
        num: ++item.num
      })
        .then(res => {
          if (res.status) {
            this.getShopCarList();
          } else {
          }
        })
        .catch(err => {});
    },
    // 商品 --
    goodReduce(item) {
      if (item.num == 1) {
        this.$ajax("/home/Shopcar/deleteShopCar", "post", {
          pro_id: item.pro_id
        })
          .then(res => {
            if (res.status) {
              this.getShopCarList();
            } else {
            }
          })
          .catch(err => {});
      }
      this.$ajax("/home/Shopcar/shopWriteNum", "post", {
        pro_id: item.pro_id,
        num: --item.num
      })
        .then(res => {
          if (res.status) {
            this.getShopCarList();
          } else {
          }
        })
        .catch(err => {});
    },
    // 跳转商品详情
    hr_goodsDetail(pro_id) {
      wx.navigateTo({
        url: "../goodsDetail/main?pro_id=" + pro_id + "&type=" + 1
      });
    },
    // 跳转到购物车
    hr_shopCar() {
      wx.switchTab({
        url: "../shopCar/main"
      });
    }
  },
  components: {
    noData
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.class_id = e.class_id;
    this.getGoodsClassName();
    this.navActive = e.navActive;
    this.getGoods(this.navActive);
    this.getShopCarList();
    this.$navColor({
      title: "商品分类"
    });
  }
};
</script>

<style lang="scss" scoped>
.win {
  background-color: #f2f3f5;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  .head_box_space {
    height: 10vh;
  }
  .head_box {
    height: 10vh;
    z-index: 5;
    left: 0;
    right: 0;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-size: 100% auto;
    .row {
      display: flex;
      width: 92%;
      $h: 60rpx;
      height: $h;
      border-radius: 10rpx;
      background-color: #fff;
      margin: 10rpx auto 0;
      overflow: hidden;
      align-items: center;
      padding-left: 40rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      .search_icon {
        $w: 31rpx;
        width: $w;
        margin-right: 0;
        height: $w;
      }
      input {
        padding-left: 20rpx;
        height: 100%;
        flex: 1;
      }
    }
  }
  .all_merchandise_box {
    max-height: 80vh;
    padding: 9rpx 17rpx;
    box-sizing: border-box;
    display: flex;
    .merchandise_left_box {
      background-color: #f7f7f7;
      width: 50%;
      // height: 100%;
      margin-right: 11rpx;
      border: 1px solid #eee;
      width: 173rpx;
      .merchandise_name {
        font-weight: 500;
        text-align: center;
        font-size: 28rpx;
        line-height: 88rpx;
        height: 88rpx;
        color: #858685;
        &.active {
          background-color: #fff;
          position: relative;
          color: $green;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5rpx;
            background-color: $green;
          }
        }
        & + .merchandise_name {
          border-top: 1px solid #eee;
        }
      }
    }
    .merchandise_right_box {
      overflow: hidden;
      flex: 1;
      .sort_bar {
        height: 88rpx;
        margin-bottom: 10rpx;
        box-sizing: border-box;
        padding: 0rpx 60rpx 0 80rpx;
        background-color: #fff;
        border-radius: 2rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .lit {
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 120rpx;
          .picker {
            line-height: 1;
            display: flex;
            align-items: center;
          }
          p {
            line-height: 1;
          }
          img {
            width: 12rpx;
            height: 18rpx;
            margin-left: 10rpx;
          }
          &.rise {
            color: $green;
          }
          color: #4d4d4d;
          font-weight: 500;
          font-size: 30rpx;
        }
      }
      .commodity_box {
        height: 100%;
        box-sizing: border-box;
        padding-bottom: 100rpx;
        flex: 1;
        .item {
          width: 532rpx;
          height: 184rpx;
          box-sizing: border-box;
          border-radius: 20rpx;
          padding: 12rpx;
          background: #ffffff;
          box-shadow: 0rpx 2rpx 7rpx 1rpx rgba(194, 192, 193, 0.43);
          margin-bottom: 10rpx;
          position: relative;
          display: flex;
          .item_top_left {
            margin-right: 19rpx;
            .img {
              border-radius: 8rpx;
              width: 160rpx;
              height: 160rpx;
            }
          }
          .item_top_right {
            padding: 10rpx 8rpx 0rpx 0;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
              width: 340rpx;
              font-size: 24rpx;
              font-weight: 500;
              color: #4d4d4d;
              margin-bottom: 4rpx;
            }
            .tips_box {
              display: flex;
              p {
                padding: 6rpx 10rpx 7rpx;
                font-size: 18rpx;
                border-radius: 15rpx;
                margin-right: 10rpx;
              }
              .blue {
                color: #6da9ff;
                background-color: #deebff;
                border-radius: 15rpx;
                margin-right: 10rpx;
              }
              .green {
                color: #ffffff;
                background-color: $green;
              }
            }
            .money_logo1 {
              font-size: 24rpx;
              color: rgba(251, 68, 46, 1);
            }
            .price {
              font-size: 36rpx;
              font-weight: 500;
              color: rgba(251, 68, 46, 1);
              margin-right: 15rpx;
            }
            .comput_row {
              position: absolute;
              right: 20rpx;
              bottom: 0rpx;
              display: flex;
              align-items: center;
              $w: 22px;
              .comput_lit {
                width: $w;
                height: $w;
              }
              .comput_lit_text {
                color: #4d4d4d;
                height: $w;
                line-height: $w;
                font-size: 28rpx;
                padding: 0 14rpx;
              }
              .shop_car_small {
                width: 52rpx;
                height: 52rpx;
                margin-right: 10rpx;
              }
            }
          }
        }
      }
    }
  }
  .immediate_settlement_box_space {
    height: 10vh;
  }
  .immediate_settlement_box {
    height: 90rpx;
    position: fixed;
    display: flex;
    padding-right: 30rpx;
    justify-content: flex-end;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 5;
    align-items: center;
    .car_num {
      display: flex;
      flex-direction: column;
      position: absolute;
      left: 44rpx;
      bottom: 18rpx;
      img {
        width: 176rpx;
        height: 107rpx;
      }
      p {
        position: absolute;
        left: 132rpx;
        top: -2rpx;
        $w: 24rpx;
        padding: 0 6rpx;
        border: 5rpx solid #fff;
        height: $w;
        background-color: #ff0000;
        border-radius: $w;
        color: #fff;
        font-size: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        overflow: hidden;
        z-index: 30;
      }
    }

    .now_price {
      text-align: right;
      padding-right: 20rpx;
      font-size: 24rpx;
      color: #999;
      font-weight: 500;
      letter-spacing: 2rpx;
      .sp1 {
        padding-right: 5rpx;
      }
      .sp2 {
        color: $red;
      }
      .sp3 {
        font-size: 36rpx;
        color: $red;
      }
    }

    .btn {
      width: 217rpx;
      height: 60rpx;
      line-height: 60rpx;
      margin-left: 20rpx;
      background: linear-gradient(
        0deg,
        rgba(11, 208, 94, 1),
        rgba(11, 208, 173, 1)
      );
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }

  .drawer_container {
    background-color: #fff;
    height: 100vh;
    width: 500rpx;
    box-sizing: border-box;
    padding: 20rpx;
    .drawer_row_t {
      height: 500rpx;
      .drawer_row {
        border-bottom: 1px solid $bor;
        overflow: hidden;
        margin-bottom: 10rpx;
        .drawer_list {
          border: 1px solid #333;
          float: left;
          border-radius: 10rpx;
          padding: 5rpx;
          margin: 0 10rpx 10rpx 0;
          &.act {
            border-color: $green;
            color: $green;
          }
        }
      }
    }
    .btn-small {
      margin-left: auto;
      margin-top: 20rpx;
      text-align: center;
      letter-spacing: 1rpx;
    }
  }
}
</style>
